<template>
  <div id="order">
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: 'home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 搜索框和订单数量总计 -->
    <el-row class="header">
      <el-col :span="8">
        <div>
          共有<span class="blue">{{ this.totalOrder }}</span
          >个订单
        </div>
      </el-col>
      <el-col :span="6">
        <el-input
          v-model="orderInput"
          placeholder="请输入要搜索的内容"
          clearable
          @change="initList"
        ></el-input>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" plain icon="el-icon-search" @click="initList"
          >搜索</el-button
        >
      </el-col>
      <el-col :span="2">
        <el-button
          type="success"
          plain
          icon="el-icon-circle-plus-outline"
          @click="addDialogVisible = true"
          >添加</el-button
        >
      </el-col>
    </el-row>

    <!-- 卡片,显示订单信息 -->
    <el-card class="box-card">
      <template>
        <el-table :data="orderList" style="width: 100%">
          <el-table-column type="index" label="#"> </el-table-column>
          <el-table-column prop="order_number" label="订单编号" width="150">
          </el-table-column>
          <el-table-column prop="goods_name" label="商品名称" width="150">
          </el-table-column>
          <el-table-column prop="num" label="商品数量" width="150">
          </el-table-column>
          <el-table-column prop="order_date" label="订单时间" width="150">
          </el-table-column>
          <el-table-column prop="money" label="支付金额" width="150">
          </el-table-column>
          <el-table-column prop="status" label="状态" width="150">
            <template slot-scope="scope">
              <el-tag v-if="JSON.parse(scope.row.status)">已接单</el-tag>
              <el-tag type="danger" v-else>未接单</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="操作">
            <template slot-scope="scope">
              <!-- js文件获取到的状态是字符串要转为布尔值 -->
              <el-button
                type="danger"
                :disabled="JSON.parse(scope.row.status)"
                @click="orderReceive(scope.row)"
                >接单</el-button
              >

              <el-button type="warning" @click="del(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>

      <!-- 复选框 -->
      <template>
        <div class="che">
          <el-checkbox :value="orderCheck" @change="oCheck">全选</el-checkbox>
          <el-checkbox :value="orderCheck1" @change="oCheck1"
            >未接单</el-checkbox
          >
          <el-checkbox :value="orderCheck2" @change="oCheck2"
            >已接单</el-checkbox
          >
        </div>
      </template>

      <!-- 这是分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[3, 5, 10, 15, 20, 30, 40, 50]"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalOrder"
      >
      </el-pagination>
    </el-card>

    <!-- 这是添加页面 -->
    <el-dialog
      title="添加订单"
      :visible.sync="addDialogVisible"
      width="30%"
      @close="addDialogClosed()"
    >
      <el-form
        :model="addOrder"
        ref="addFormRef"
        :rules="addFormRules"
        label-width="80px"
      >
        <el-form-item label="订单编号" prop="order_number">
          <el-input v-model="addOrder.order_number"></el-input>
        </el-form-item>
        <el-form-item label="商品名称" prop="goods_name">
          <el-input v-model="addOrder.goods_name"></el-input>
        </el-form-item>
        <el-form-item label="商品数量" prop="num">
          <el-input v-model="addOrder.num"></el-input>
        </el-form-item>
        <el-form-item label="支付金额" prop="money">
          <el-input v-model="addOrder.money"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOr">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    var checkOrNum = (rule, value, callback) => {
      let reg = /^\d{6}$/;
      if (reg.test(value)) {
        callback();
      } else {
        callback(new Error("请输入正确的编号"));
      }
    };

    var checkNum = (rule, value, callback) => {
      let reg = /^[0-9]*[1-9][0-9]*$/;
      if (reg.test(value)) {
        callback();
      } else {
        callback(new Error("请输入正确的编号"));
      }
    };

    var checkMoney = (rule, value, callback) => {
      let reg = /^(?!0$)\d+(.\d+)?$/;
      if (reg.test(value)) {
        callback();
      } else {
        callback(new Error("请输入正确的价格"));
      }
    };
    return {
      orderInput: "",
      orderList: [],
      totalOrder: 0,
      page: 0,
      limit: 3,
      orderCheck: false,
      orderCheck1: false,
      orderCheck2: false,
      addOrder: {},
      addDialogVisible: false,
      addFormRules: {
        order_number: [
          { required: true, message: "请输入编号" },
          { validator: checkOrNum, message: "请输入6位数字" },
        ],
        goods_name: [{ required: true, message: "请输入商品名称" }],
        num: [
          { required: true, message: "请输入商品数量" },
          { validator: checkNum, message: "请输入正整数" },
        ],
        money: [
          { required: true, message: "请输入支付金额" },
          { validator: checkMoney, message: "请输入正数" },
        ],
      },
    };
  },
  created() {
    this.initList();
  },
  methods: {
    initList() {
      let url;
      if (this.orderCheck) {
        url = `order?_page=${this.page}&_limit=${this.limit}`;
      } else if (this.orderCheck1) {
        url = `order?_page=${this.page}&_limit=${this.limit}&status=false`;
      } else if (this.orderCheck2) {
        url = `order?_page=${this.page}&_limit=${this.limit}&status=true`;
      } else {
        url = `order?_page=${this.page}&_limit=${this.limit}`;
      }
      if (this.orderInput) {
        url += `&q=${this.orderInput}`;
      }
      this.$http.get(url).then((rs) => {
        this.orderList = rs.data;
        // 获取定点个数，由于data数组是动态可扩展的，不能直接调用length
        this.totalOrder = parseInt(rs.headers["x-total-count"]);
      });
    },
    // 这是分页要用到的方法
    handleSizeChange(size) {
      this.limit = size;
      this.initList();
    },
    handleCurrentChange(page) {
      this.page = page;
      this.initList();
    },
    // 这是全选触发的效果
    oCheck() {
      this.orderCheck = !this.orderCheck;
      this.orderCheck1 = this.orderCheck;
      this.orderCheck2 = this.orderCheck;
      this.initList();
    },
    oCheck1() {
      this.orderCheck1 = !this.orderCheck1;
      this.orderCheck = this.orderCheck1 && this.orderCheck2 && true;
      this.initList();
    },
    oCheck2() {
      this.orderCheck2 = !this.orderCheck2;
      this.orderCheck = this.orderCheck1 && this.orderCheck2 && true;
      this.initList();
    },

    // 接单
    orderReceive(row) {
      row.status = !JSON.parse(row.status);
      this.$http.put("order/" + row.id, row).then((rs) => {
        if (rs.status == 200) {
          this.$message.success("成功接单！");
        } else {
          this.$message.success("接单失败！");
        }
      });
    },
    //  添加
    addOr() {
      this.$refs.addFormRef.validate((valid) => {
        if (!valid) return false;
        var newDate = new Date();
        var str = newDate.getHours() + ":" + newDate.getMinutes();
        this.addOrder.order_date = str;
        this.addOrder.status = false;
        this.$http.post("order", this.addOrder).then((rs) => {
          if (rs.status != 201) {
            this.$message.error("订单添加失败");
          } else {
            this.$message.success("订单添加成功");
          }
          this.addDialogVisible = false;
          this.initList();
        });
      });
    },
    addDialogClosed() {
      this.$refs.addFormRef.resetFields();
    },
    // 删除
    del(row) {
      this.$confirm("此操作将永久删除该订单, 是否继续?", "删除提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http.delete("order/" + row.id).then((rs) => {
            if (rs.status == 200) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.initList();
            } else {
              this.$message({
                type: "danger",
                message: "删除失败!",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style lang="scss" scoped>
#order {
  .header {
    display: flex;
    align-items: center;
    margin: 30px 20px;
    margin-top: 10px;
    .blue {
      color:#f7863b;
    }
  }
  .che {
    margin: 20px 50px;
  }
}
</style>
